import { useState, useRef } from 'react'
function Ref() {
  // 1. 使用useState
  const [filter, SetFilter] = useState({ status: 1 })
  console.log('re-render')
  // 2. 使用useRef
  const _filter = useRef({})
  return (
    <div>
      <h1>使用useRef存储值</h1>
      <ul>
        <li>{filter.status}</li>
        <li>
          <button
            onClick={() => {
              SetFilter({
                status: Math.random() * 100,
              })
            }}>
            存值
          </button>
        </li>
        <li>
          <button
            onClick={() => {
              console.log(_filter)
              // _filter.current.status = Math.random() * 100
            }}>
            useRef获取值
          </button>
          <button
            onClick={() => {
              console.log(_filter)
              _filter.current.status = Math.random() * 100
            }}>
            useRef存值
          </button>
        </li>
      </ul>
    </div>
  )
}

export default Ref
